<template>
    <view style="width: 100%;border-bottom: 2rpx #eee solid;">
        <view class="worker-filter">
            <view class="worker-filter-item" v-if="membersState" @click="openSelect(2)">
                <text :style="{color:type2.selectType===2 && type2.selectArr && type2.selectArr.length?'#0091ff;':''}" >部门</text>
                <text class="worker-filter-count" v-if="type2.selectType===2 && type2.selectArr && type2.selectArr.length" style="#0091ff" >
                    {{type2.selectArr.length}}
                </text> 
                <image :class="onType == 2 ? 'trt45' : ''" src="@/static/images/repairFitting/right.png"></image>
            </view>
            <view class="worker-filter-line"></view>
            <view class="worker-filter-item" @click="openSelect(1)">
                <text :style="{color:type1.selectType===1 && type1.selectArr && type1.selectArr.length?'#0091ff;':''}" >
                    {{type1.seletNull?'未设置':'责任人'}}</text>
                <text class="worker-filter-count" v-if="type1.selectType===1 && type1.selectArr && type1.selectArr.length" style="#0091ff" >
                    {{type1.selectArr.length}}
                </text> 
                <image :class="onType == 1 ? 'trt45' : ''" src="@/static/images/repairFitting/right.png"></image>
            </view>
        </view>
        <groupSelect @closed="closed" @submit="submit" ref="groupSelect"></groupSelect>
    </view>
</template>
<script>
import groupSelect from './group-select.vue';
export default {
	components: { groupSelect },
	props: {
		membersData:{
			type:Array,
			default:[]
		}
	},
	data() {
		return {
			onType: 0,// 当前展开的项目  2 部门 1 责任人 
			selectArr: [],
			type1:{
				selectArr:[],
				seletNull:false,
			},
			type2:{
				selectArr:[],
				seletNull:false,
			},
		};
	},
	computed:{
		membersState() {
			let arrs = this.membersData;
			let result = true;
			if (arrs && arrs.length === 1) {
				if (!arrs[0].children || arrs[0].children.length <= 0) {
					result = false;
				}
			} else if (arrs && arrs.length > 1) {
				result = true;
			}
          
			return result;
		}
	},
	methods: {
		openSelect(type) {
			this.onType = type;
			this.$refs.groupSelect.initData({
				selectType: type,
				selectArr: this['type' + type].selectArr,
				seletNull:this['type' + type].seletNull,
			}); 
		},
		submit(res) {
			this['type' + res.selectType] = res;
			this.$emit('submit', this.type1,this.type2);
			// console.log('submit', res)
			// this.$emit('submit', res)
		},
		closed() {
			this.onType = 0;
		}
	}
};
</script>
<style lang="scss" scoped>
.worker-filter {
    width: 100%;
    display: flex;
    align-items: center;

    &-item {
        width: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        text-align: center;
        color: #666666;
        height: 78rpx;

        image {
            width: 25rpx;
            height: 25rpx;
            margin-left: 10rpx;
            transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transition: .3s all;
        }
    }
    &-count{
        display: inline-block;
        padding: 4rpx;
        height: 28rpx;
        min-width: 28rpx;
        background: #dcf0ff;
        border-radius: 50%;   
        font-size: 22rpx;
        font-weight: 400;
        text-align: center;
        color: #0091ff;
        line-height: 28rpx;
        margin: 5rpx 0 0 10rpx;
    }

    &-line {
        width: 2rpx;
        height: 32rpx;
        background-color: #eeeeee;

    }

    .trt45 {
        transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
    }
}
</style>